<template>
    <div class="">
        <div class="scorll-wrap positionR" v-if="userList.isScorll">
                <ul class="user-list-wrap" :style="{height:userList.list.length * .65 +'rem'}" v-if="Array.isArray(userList.list) && userList.list.length > 0">
                    <scroller
                            ref="myscroller"
                            :on-refresh="refresh"
                            :on-infinite="infinite">
                        <li class="width-full displayFlex user-list flex-algin-center" v-for="(value,key) in userList.list" v-if="userList.showLength - 1 >= key">
                            <span class="user-header">
                                <img class="user-header-img" :src="value.image" alt="">
                            </span>
                                <span class="flex1 user-item-description">
                                <p class="user-name">{{value.name}} <span class="self-mark" v-if="value.userId == userId && userList.isMarkSelf">我</span> </p>
                                <p class="description-text">{{value.description}}</p>
                            </span>
                            <span class="user-item-right-text">
                                {{value.rightText}}
                            </span>
                        </li>
                    </scroller>
                </ul>
        </div>
        <div class="scorll-list" v-else>
            <ul class="user-list-wrap" v-if="Array.isArray(userList.list) && userList.list.length > 0">
                <li class="width-full displayFlex user-list flex-algin-center" v-for="(value,key) in userList.list" v-if="userList.showLength - 1 >= key">
                    <span class="user-header" @click="$emit('clickUserHeader',value)" >
                        <img class="user-header-img" :src="value.image" alt="">
                    </span>
                    <span class="flex1 user-item-description">
                        <p class="user-name">{{value.name}} <span class="self-mark" v-if="value.userId == userId">我</span> </p>
                        <p class="description-text">{{value.description}}</p>
                    </span>
                    <span class="user-item-right-text">
                        {{value.rightText}}
                    </span>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
    export default {
        name: "UserList",
        props: {
            userProp: Object
        },
        data() {
            return {
                userList: {
                    isScorll:false,
                    curPage:1,
                    totalPages:1,
                    loadMore:false,
                    isMarkSelf:true,
                    showLength : 5,
                    list: [
                        // {
                        //     userId: 0,
                        //     name: '少年的你',
                        //     image: 'https://oss.pg.yibaotong.top/images/activity/circle/1023gift/bbd.png',
                        //     description: '刚刚',
                        //     rightText: '234.56',
                        // }
                    ]
                }
            }
        },
        mounted() {
            this.userList = Object.assign({}, this.userList, this.userProp);
        },
        methods:{
            refresh(){
                let that = this;
                let tempObj={
                    loadMore:false,
                    curPage:that.userList.curPage,
                    totalPages:that.userList.totalPages,
                    id:that.userList.id
                }
                setTimeout(()=>{
                    that.$emit('loadingMore',tempObj);
                    that.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                },500)
            },
            infinite(){
                let that = this;
                let tempObj={
                    loadMore:true,
                    curPage:that.userList.curPage,
                    totalPages:that.userList.totalPages,
                    id:that.userList.id
                }
                that.$refs.myscroller.finishInfinite(true);//刷新完毕关闭刷新的转圈圈
                setTimeout(()=>{
                    that.$emit('loadingMore',tempObj);
                    that.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                },500)
            },
        },
        watch: {
            userProp: function (val) {
                this.userList = Object.assign({}, this.userList, val);
                // if( this.userList.list && this.userList.list.length > 0 ){
                //     this.userList.list.splice(0,1,this.userList.list[0]);
                // }
            }
        }
    }
</script>

<style scoped>
    .user-list {
        padding-bottom: .3rem;
    }

    .user-header {
        display: inline-block;
        width: .34rem;
        height: .24rem;
        padding-right: .1rem;
    }

    .user-header-img {
        width: .24rem;
        height: .24rem;
        border-radius: .25rem;
    }

    .user-item-description {
        color: #333;
    }

    .user-item-right-text {
        font-size: .14rem;
        color: #333;
    }

    .description-text {
        color: #333;
        font-size: .1rem;
    }
    .user-list-wrap{
        max-height: 60vh;
        overflow: auto;
    }
    .self-mark{
        display: inline-block;
        border: 1px solid #FDD909;
        font-size: .12rem;
        padding: 0 .02rem;
        color: #FDD909;
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
    }
</style>